<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
        <!-- 搜索表单 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="订单号" prop="saleId">
              <el-input v-model="queryParams.saleId" placeholder="请输入订单号" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="预订人" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入预订人" clearable size="small" @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="身份证号" prop="nameId">
              <el-input v-model="queryParams.nameId" placeholder="请输入身份证号" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房号" prop="roomId">
              <el-input v-model="queryParams.roomId" placeholder="请输入房号" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker v-model="value1" type="date" placeholder="选择开始日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="截止日期" prop="endDate">
              <el-date-picker v-model="value2" type="date" placeholder="选择截止日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
            </el-form-item>
        </el-form>
  
        <!-- 数据操作按钮 -->
        <el-row :gutter="10">
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="small" :disabled="single" @click="handleDelete" >退房</el-button>
            </el-col>
          </el-row>
  
        <!-- 数据展示Table -->
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="订单号" prop= "saleId" align="center" />
          <el-table-column label="房型" prop="category.categoryName" align="center"/>
          <el-table-column label="房号" prop="roomId" align="center"/>   
          <el-table-column label="预订人" prop="name" align="center"/>
          <el-table-column label="身份证号" prop="nameId" align="center"/>
          <el-table-column label="开始日期" prop="startDate" align="center"/>
          <el-table-column label="截止日期" prop="endDate" align="center"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">退房</el-button>
            </template>
            </el-table-column>
          </el-table>
  
           <!-- 分页加载 -->
           <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="queryParams.pageNum"
           :page-sizes="[5, 10, 20, 50]"
           :page-size="queryParams.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           >
          </el-pagination>
  
        </el-col>
      </el-row>
      
      <!-- 新增/修改对话框 默认不显示 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="类别名称" prop="categoryName">
            <el-input v-model="form.categoryName" placeholder="请输入类别名称" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
  
     
  
    </div>
  </template>
  
    
    <script>
    import { listCheckInSale, delCheckin } from "@/api/checkin"
    export default {
      name: "CheckIn",
      // 定义属性
      data() {
        return {
          //日期选择
          pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          
        },
        value1: '',
        value2: '',
          // 遮罩层
          loading: false,
          // 表格数据
          dataList: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 5,
          },
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 勾选1个或多个
          multiple: true,
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 表单
          form: {},
          // radio: '1',
        rules: {
          categoryName: [
            { required: true, message: '请输入房型名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          categoryId: [
            { required: true, message: '请选择房型ID', trigger: 'change' }
          ],
        },
        // 总条数
        total: 0,
        }
      },
      // 计算属性，可选
    computed: {},
    // 监控data变化，可选
    watch: {},
    // 生命周期-创建完成，可选
     created() {
      this.getSaleList();
      this.getCategoryList();
      this.getList();
          },
    // 生命周期-挂载完成，可选
    mounted() {},
      methods: {
        /** 查询数据列表 */
        getSaleList() {
          this.loading = true;
          // 结果赋值this.dataList
          listCheckInSale(this.queryParams).then(response => {
            this.dataList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          })
      },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getSaleList();
        },
  
        /** 重置按钮操作 */
        resetQuery() {
          this.$refs.queryForm.resetFields();
          this.getSaleList();
        },

        /** 删除按钮操作 */
        handleDelete(row) {
          const saleId = row.saleId || this.ids
          this.$confirm('是否确认订单号为"' + saleId + '"的数据项办理退房?',"警告",{
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(function () {
            return delCheckin(saleId);
          })
          .then(() => {
            this.getSaleList(); // 刷新数据
            this.$message.success("退房成功");
          })
          .catch(() => {});
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.categoryId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
        /** 表单初始化 */
        resetForm() {
        // 可进行数据初始化工作
        this.form = {
          categoryName: null,
          //categoryId: null
        }
      },
        
      /** 提交按钮 */
      // submitForm: function () {
      //     this.$refs["form"].validate(valid => {
      //       if (valid) {
      //         if(this.form.categoryId != null){
      //           updateCategory(this.form).then(response => {
      //             this.$message.success(response.msg);
      //             this.getSaleList();
      //             this.cancel();
      //           })
      //         }else {
      //           addCategory(this.form).then(response => {
      //             this.$message.success(response.msg);
      //             this.getSaleList();
      //             this.cancel();
      //           })
      //         }
      //       }
      //     });
      //   },
        /** 取消按钮 */
        cancel() {
          this.open = false;
          this.title = "";
          this.resetForm();
        },
        
         /** 处理分页 */
         handleSizeChange(val) {
          this.queryParams.pageSize = val;
          this.getSaleList();
        },
        handleCurrentChange(val) {
          this.queryParams.pageNum = val;
          this.getSaleList();
        },
  
        
      },
      
    }
    </script>
  
  <style scoped lang="scss">
  
  </style>
  